<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="40%"
  >
    <el-row :gutter="20">
      <el-form ref="form" :model="form" :rules="rules">
        <el-col :span="12">
          <el-form-item label="审批模版" prop="classifyName">
            <el-input v-model="form.classifyName"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="审批类型" prop="type">
            <el-select v-model="form.type" placeholder="审批类型">
              <el-option
                v-for="item in MajorHazardType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="部门" prop="deptId">
            <el-cascader
              v-model="form.deptId"
              :show-all-levels="false"
              :options="deptList"
              :props="{
                checkStrictly: true,
                label: 'label',
                value: 'id',
                children: 'children',
                expandTrigger: 'hover',
              }"
            >
            </el-cascader>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="备注" prop="remark">
            <el-input v-model="form.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-form>
    </el-row>
    <el-row type="flex" justify="center" slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit()">确 定</el-button>
      <el-button @click="handleClose()">取 消</el-button>
    </el-row>
  </el-dialog>
</template>

<script>
import { mapState } from "vuex";
import {
  approvalClassifySaveOrModifyClassify,
  approvalClassifyInfo,
} from "@/api/system/Approval";
export default {
  computed: {
    ...mapState({
      deptList: (state) => state.user.deptList,
      deptNameS: (state) => state.user.deptNameS,
    }),
  },
  data() {
    return {
      dialogVisible: false,
      title: "",
      form: {
        classifyName: "",
        type: "",
        remark: "",
        deptId: "",
      },
      MajorHazardType: [
        { value: "1", label: "文件审批" },
      ],
      options: [
        {
          value: "01",
          label: "到货审批",
        },
        {
          value: "02",
          label: "安装审批",
        },
        {
          value: "03",
          label: "技术规格书审批",
        },
        {
          value: "04",
          label: "设备租赁审批",
        },
        {
          value: "05",
          label: "设备退租审批",
        },
        {
          value: "06",
          label: "设备停租审批",
        },
        {
          value: "07",
          label: "设备续租审批",
        },
        // {
        //   value: "08",
        //   label: "普通类型",
        // },
      ],
      rules: {
        classifyName: [
          { required: true, message: "请输入审批模版", trigger: "change" },
        ],
        type: [
          { required: true, message: "请选择审批类型", trigger: "change" },
        ],
        deptId: [{ required: true, message: "请选择部门", trigger: "change" }],
      },
    };
  },
  methods: {
    async init(id) {
      if (id) {
        // console.log(id);
        let res = await approvalClassifyInfo({ id });
        res.data.deptId = findPath(this.deptList, res.data.deptId);
        this.form = res.data;
        this.title = "编辑";
      } else {
        this.title = "新增";
      }
      function findPath(data, targetId) {
        let path = [];

        function helper(node, currentPath) {
          if (node.id === targetId) {
            path = [...currentPath, node.id];
            return true;
          }

          if (node.children) {
            for (let child of node.children) {
              if (helper(child, [...currentPath, node.id])) {
                return true;
              }
            }
          }

          return false;
        }

        for (let node of data) {
          if (helper(node, [])) {
            break;
          }
        }

        return path;
      }

      this.dialogVisible = true;
    },
    async submit() {
      await this.$refs.form.validate();
      let obj = JSON.parse(JSON.stringify(this.form));
      obj.deptId = obj.deptId[obj.deptId.length - 1];
      obj.deptName = this.deptNameS[obj.deptId];
      // return console.log(obj);
      await approvalClassifySaveOrModifyClassify(obj);
      this.handleClose(true);
      console.log("submit");
    },
    async handleClose(e = false) {
      this.dialogVisible = false;
      this.form = {
        classifyName: "",
        type: "",
        remark: "",
        deptId: "",
      };

      // await this.$refs.form.clearValidate();
      await this.$refs.form.resetFields();
      e ? this.$emit("dialogBack", false) : "";
    },
  },
};
</script>
<style lang="less" scoped>
/deep/ .el-cascader {
  width: 100%;
}
/deep/ .el-select {
  width: 100%;
}
</style>
